<template>

<div class="loginBox">
  <a-card style="width:300px;border-radius: 50px;">
    <h3 style="margin-left:90px;">cjsocute!</h3>
    <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
    @finish="login"
  >
    <a-form-item
      label="Username"
      name="username"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="formState.username" />
    </a-form-item>

    <a-form-item
      label="Password"
      name="password"
      :rules="[{ required: true, message: 'Please input your password!' }]"
    >
      <a-input-password v-model:value="formState.password" />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit" style="border-radius: 30px;">Submit</a-button>
    </a-form-item>
    </a-form>
  </a-card>
</div>

</template>

<script setup lang='ts'>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { genTestUserSig } from './../../../debug';
import { useTIMStore } from './../../store/chat';

const router = useRouter()
const TIMStore = useTIMStore()

interface FormState {
  username: string;
  password: string;
}
const formState = reactive<FormState>({
      username: '',
      password: ''
});

const login = () => {
  router.push('/home')
  // 生成密钥
  const {userSig} = genTestUserSig({
    userID:formState.username,
    SDKAppID:1400789552,
    secretKey:'1ce5d59df268799b1d5a8435d786c0438ca02c89bb4d2395cc0705537e1835ab'
  })
  TIMStore.timCore.timLogin({
    userSig,
    userID:formState.username
  })
}

</script>

<style scoped lang='scss'>
.loginBox{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: #2f3447;
}
</style>